<script setup>
import { defineAsyncComponent, provide, ref, watch } from 'vue';
import { useResp, getTaskInfo } from '@/net/requ.js';
import { useTabs } from '@/util/tabs.js';
import * as storage from '@/util/storage.js';
import { onBeforeRouteLeave } from 'vue-router';

const props = defineProps(['id']);
provide('taskId', props.id);

const { tabs, compoMap, activeKey } = useTabs(
  [
    { title: '数据详情', compo: defineAsyncComponent(() => import('./data-detail/index.vue')) },
    { title: '题目搜索', compo: defineAsyncComponent(() => import('./ques-search/index.vue')) },
  ],
  R.propOr('', 'activeKey', storage.readAsObj('task-detail'))
);

watch(activeKey, value => {
  storage.writeAsStr('task-detail', { activeKey: value });
  localStorage.removeItem('pkgInfo');
});

onBeforeRouteLeave((to, from, next) => {
  const labelPathList = ['/obj-detn', '/seq-label', '/text-classification'];
  const isNotToLabel = () => R.compose( R.not, R.includes(to.path) )(labelPathList);
  if (isNotToLabel()) {
    localStorage.removeItem('task-detail');
    localStorage.removeItem('ques-search');
  }
  next();
});

const taskInfo = ref(null);
provide('taskInfo', taskInfo);

function main() {
  getTaskInfo(props.id)
  .then(useResp({
    succ: result => {
      taskInfo.value = result.data;
      localStorage.setItem('taskInfo', JSON.stringify(result.data));
    }
  }));
}

main();
</script>

<template>
  <div class="task-list">
    <h2>{{ taskInfo?.taskName ?? '--' }}</h2>
    <a-tabs v-model:active-key="activeKey">
      <template v-for="o in tabs" :key="o.title">
        <a-tab-pane :tab="o.title"></a-tab-pane>
      </template>
    </a-tabs>
    <component :is="compoMap[activeKey]"></component>
  </div>
</template>

<style>
.task-list {
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
}

.task-list .status-list {
  display: flex;
  gap: .5em;
  margin-bottom: 1em;
}
</style>
